<template>
  <div class="top-downloads">
    <GoogleAdCollect
      v-if="showAds"
      :id="adSlot"
      :adm-id="admId"
      :name="name"
      :parent-page="parentPage"
      @adSuccess="handleAdSuccess"
      @adError="handleAdError"
    />

    <div class="title">
      <div class="type-name">Top Downloads</div>
      <a :href="`/top-rank`" class="see-all">See all <el-icon><ArrowRight /></el-icon></a>
    </div>
    <div class="apps-list">
      <a :href="getDetailUrl(item)" class="app-item" v-for="(item, index) in appList" :key="index" @click="handleClickApp('Top Download Apps', item.name)">
        <div class="top-num">
          <div class="num" :style="{ backgroundColor: numColor(index) }" v-if="index < 3">{{ index + 1 }}</div>
          <img class="img-icon" :src="item.icon" />
        </div>
        <div class="info">
          <div class="name">{{  item.name  }}</div>
          <div class="category">{{  item.category  }}</div>
          <div class="rating">
            {{ item.rating }}
            <div class="icon">★</div>
          </div>
        </div>
        <div class="get-app">GET</div>
      </a>
    </div>
  </div>
</template>

<script setup>
import GoogleAdCollect from '@/components/GoogleAdCollect.vue'
import topDownloadData from '~/assets/data/top/top_downloads.json'
import { useRoute } from '#app'
import { homeParams } from '~/utils/homeParams'
import { ref, computed, onMounted } from 'vue'

const { adSlot } = defineProps({
	adSlot: {
		type: String,
		required: true,
	},
  admId: {
    type: String,
    required: true,
  },
  name: {
    type: String,
    required: true,
  },
  parentPage: {
    type: String,
    required: true,
  },
});

const route = useRoute()
// 获取当前路由
const currentRoute = route.path
const detailUrls = ref(new Map())

const showAds = computed(() => {
  if ((isMobile.value && (currentRoute.includes('details') || currentRoute.includes('download'))) || currentRoute.includes('faq')) {
    return false
  } else {
    return true
  }
})
// 判断是否是移动端
const isMobile = ref(false)
const appList = computed(() => {
  // 根据rating的大小先给topDownloadData排序
  const sortedData = [...topDownloadData].sort((a, b) => b.rating - a.rating);
  return isMobile.value ? sortedData.slice(0, 4) : sortedData;
})

const generateDetailUrls = () => {
  appList.value.forEach(item => {
    const queryParams = {
      type: 'games',
      slug: item.slug,
      ...homeParams()
    }
    detailUrls.value.set(item.slug, `/details?${new URLSearchParams(queryParams).toString()}`)
  })
}

onMounted(() => {
  isMobile.value = window.innerWidth < 768
  generateDetailUrls()
})

// 前三排名颜色
const numColor = (index) => {
  let color = ''
  switch (index) {
    case 0:
      color = '#F9BE1A';
      break;
    case 1:
      color = '#2C8DFF';
      break;
    case 2:
      color = '#FF711C';
      break;
  }
  return color
}

const getDetailUrl = (item) => {
  return detailUrls.value.get(item.slug)
}

const handleClickApp = (type, name) => {
  logEvent('Click_APP', {
    Subzone: type,
    App: name,
  })
}

const handleAdSuccess = () => {
  console.log('广告加载成功')
}

const handleAdError = () => {
  console.log('广告加载失败')
}
</script>

<style scoped lang="scss">
.top-downloads {
  width: 100%;
  /* overflow: hidden; */
  
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
    margin-top: 1rem;
    .type-name {
      @include title;
    }
    .see-all {
      font-family: googlesans,Arial,sans-serif,serif;
      font-size: 14px;
      display: flex;
      align-items: center;
      color: #555;
      cursor: pointer;
      text-decoration: none;
    }
  }
  .apps-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1rem;
    width: 100%;
    
    .app-item {
      display: flex;
      align-items: center;
      gap: 1rem;
      text-decoration: none;
      color: #000;
      /* padding: 0.5rem; */
      
      .top-num {
        position: relative;
        border-radius: .8rem;
        width: 4.5rem;
        height: 4.5rem;
        overflow: hidden;
        flex-shrink: 0;
        .num {
          position: absolute;
          font-weight: 700;
          color: #fff;
          padding: 0 .4rem;
          background-color: #F78B17;
          border-bottom-right-radius: .3rem;
        }
        .img-icon {
          object-fit: cover;
          width: 100%;
          height: 100%;
          background-image: url('/img/default.png');
          background-size: 4.5rem 4.5rem;
          background-position: center;
        }
      }
      
      .info {
        display: flex;
        flex-direction: column;
        gap: .1rem;
        flex: 1;
        min-width: 0;
        .name {
          font-size: 0.9rem;
          margin-bottom: 0.25rem;
          font-weight: 500;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 9rem;
        }
        .category {
          font-size: .7rem;
          color: #666666;
        }
        .rating {
          display: flex;
          align-items: center;
          font-size: 0.8rem;
          color: #F75867;
          .icon {
            color: #666;
            margin-left: 0.25rem;
          }
        }
      }

      .get-app {
        display: block;
        border-radius: 1rem;
        border: 1px solid #F78B17;
        color: #F78B17;
        padding: 0.2rem 1.2rem;
        white-space: nowrap;
        flex-shrink: 0;
      }
    }
    
    @media screen and (max-width: 768px) {
      .app-item {
        display: grid;
        grid-template-columns: auto 1fr auto;
        width: 100%;
        
        /* .top-num {
          width: 3.5rem;
          height: 3.5rem;
        } */
        
        .info {
          min-width: 0;
          .name {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>